-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[styled-engine] Drop withComponent support #27780
[styled-engine] Drop withComponent support #27780
Conversation
6db4277
to
2543a42
Compare
d58bdb6
to
e29ffb2
Compare
|
||
const ItemLink = styled(Item.withComponent(Link), { | ||
const ItemLink = styled(Item, { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const ItemLink = styled(Item, { | |
const ItemLink = styled(({ component = Link, ...props }) => <Item component={component} {...props} />, { |
isn't this the equivalent?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I imagine the equivalent is :
const ItemLink = styled(Item, { | |
const ItemLink = styled(({ component = Link, ...props }) => <Item as={component} {...props} />, { |
but there is already an as
prop coming from the navigation that conflicts, e.g. as: '/api/accordion'
so it doesn't work.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We are not even documenting this API anywhere so we should be good to go..
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We almost never use it in the codebase, the smaller the API surface, the easier we can make changes.
👍🏻
tag: Tag, | ||
): StyledComponent<PropsOf<Tag>, StyleProps, Theme>; | ||
} | ||
ComponentSelector {} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we want to push it the extra mile with the tradeoff of @dimitropoulos in #20012 (comment)?
ComponentSelector {} | |
ComponentSelector { | |
/** | |
* Use the `as` prop instead. | |
* It's not style destructive when using multiple layers of styled() calls. | |
*/ | |
withComponent(tag: any): never; | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually, it doesn't work in this context. It would silence the missing support in TypeScript.
Breaking changes
#27780
) @oliviertassinariUse the
as
prop instead. It's not style destructive when using multiple layers of styled() calls.Why?
https://styled-components.com/docs/api#withcomponent
https://goober.js.org/
I have noticed this in #27776.